// 用事件代理就先获取最大的盒子
let box = document.querySelector(".box")
//然后找ul
let imgBoxUl = box.querySelector(".img_box > ul");
// console.log(imgBoxUl);//获取ul节点包括里面的li

//动态生成图片（第一张和最后一张,那么就要获取第一张和最后一张）
// console.log(imgBoxUl.firstElementChild.cloneNode(true));//打印第一张
// console.log(imgBoxUl.lastElementChild.cloneNode(true));//打印最后一张
// console.log(imgBoxUl.children);

//将第一张图片插入最后面
imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true).cloneNode(true));
//将最后一张图片插入第一张前面
imgBoxUl.insertBefore(imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true), imgBoxUl.firstElementChild)
// console.log(imgBoxUl.children.length);

//事件委托，给父元素盒子设置事件
let index = 1;
let lastIndex = 1;
imgBoxUl.style.transform = `translateX(-${index}00%)`;//当index=1时，图片在-100%的位置

//事件代理
box.addEventListener("click",function(event) {
  //当点击右箭头的时候，图片移动
  if(event.target.className == "arrow_right") {
    arrowRfn(event.target);//为什么这里可以event.target
  }
  //当点击左箭头的时候，图片移动
  if(event.target.className == "arrow_left") {
    arrowLfn(event);//这里event.target却要报错
  }
  //当点击小圆点的时候，图片移动
  if(event.target.classList.contains("dot")) {
    dotfn(event);
  }

})

//右点击事件
function arrowRfn(e) {
  // console.log(e);
  // console.log(e.target);
  index++;
  imgBoxUl.style.transform = `translateX(-${index}00%)`;
  //当index=5的时候，让它直接跳转到第一张，但是不能有过渡动画，然后下一次点击的时候就是第二张
  if(index == 5) {
    // console.log(index);
    index=1;
    limit();
  }

  let dotR = e.parentElement.nextElementSibling.children[index - 1];
  // console.log(dotR);
  dotColor(dotR)
}

//临界值
function limit() {

    //设置一个监听事件，监听动画结束之后，应该要做什么
    imgBoxUl.addEventListener("transitionend", function(){
      //当最后一张的动画效果结束之后，清除动画。目的：为了不让返回第一张的时候，呈现动画效果
      imgBoxUl.style.transition = "none";
      // 让图片返回第一张，-100%的位置
      imgBoxUl.style.transform = `translateX(-${index*100}%)`;
      
      //当回到第一张之后，恢复动画值
      window.getComputedStyle(imgBoxUl,"style").transition;//获取transition的最终值，只有获取了这个值之后，
                                                            //在下面再设置transition才不会覆盖上面的值。
      imgBoxUl.style.transition = "0.2s ease-in-out";
  })
  
}

//左点击事件
function arrowLfn(e) {
  // console.log(e);
  // console.log(e.target);
  index--;
  imgBoxUl.style.transform = `translateX(-${index}00%)`;
  if(index == 0){
    index=4;
    limit();
  }
  let dotL = e.target.parentElement.nextElementSibling.children[index - 1];
  // console.log(dotL);
  dotColor(dotL)
}

//小圆点事件
function dotfn(e) {
  // console.log(e)
// let dataIndex = e.target.getAttribute("data-index");
let dataIndex = e.target.dataset.index
// console.log(dataIndex);
index = dataIndex;
imgBoxUl.style.transform = `translateX(-${index}00%)`;
dotColor(e)
}

//小圆点颜色
function dotColor(e) {
  // console.log(e.target);
  e.parentElement.children[lastIndex - 1].classList.remove("dotActive");
  // console.log(e.target.parentElement[0]);
  e.classList.add("dotActive");
  lastIndex = index;
}
let timer;
timeFn();
function timeFn() {
    if (timer) {
        clearInterval(timer);
    }
    timer = setInterval(function () {
      // arrowLfn(imgBoxUl);
      arrowRfn(imgBoxUl);
    }, 1000);
}

// 鼠标移入box区域，停止定时器
box.addEventListener("mouseenter", function () {
  clearInterval(timer);
});
// 鼠标移出box区域，开始定时器
box.addEventListener("mouseleave", function () {
  setTimeout(timeFn, 2000)
});

// 检测页面是否切换，切换就停止定时器
window.addEventListener("visibilitychange", function () {
  if (document.hidden) {
      clearInterval(timer);
  } else {
      timeFn();
  }
});